import ChiVoxSDK from 'chivox';
import Config from './config';

import $ from 'jquery';
import '../css/chivox-example.css';

var wordObj = {
  text: "你好",
  refText: "ni2-hao3"
};
$(".currentWord").html(wordObj.text);

let sdk = new ChiVoxSDK({
    appKey: Config.appKey,
    //mode: ChiVoxSDK.MODE.FLASH,
    sigurl: "/token",
    data: {
      audioUrl: "/static/ni2-hao3.mp3",
      serverParams: {
        coreType: "cn.word.score",
        refText: wordObj.refText,
        rank: 100,
        userId: "chivox tester",
      }
    },

    onInit: (errno, err) => {
        console.info('[ onInit ]:', errno, err);
    },

    onError: (err) => {
        console.error('[ onError ]:', err);
    },

    onBeforeRecord: () => {
      $("#scoreResult .scoreField").empty();
    },

    onScore: (data) => {
      var resultObj = new ChiVoxSDK.CnWordScore(data);

      $("#scoreResult .overall").html(resultObj.getOverall());
      $("#scoreResult .pron").html(resultObj.getPron());
      $("#scoreResult .phn").html(resultObj.getPhn());
      $("#scoreResult .tone").html(resultObj.getToneScore());

      var html = '',  htmlA = '',  htmlB = '',  htmlC = '',  htmlD = '', htmlE = '', htmlF = '';

      html += '<table class="table table-hover table-condensed">';
      htmlA += '<td>无调拼音串</td>';
      htmlB += '<td>总分</td>';
      htmlC += '<td>带调发音</td>';
      htmlD += '<td>无调发音</td>';
      htmlE += '<td>声调得分</td>';
      htmlF += '<td>声调置信度</td>';
      for (var i = 0; i < resultObj.getCharSize(); i++) {
        var phoneHtml = '';
        phoneHtml += '声韵母得分：';

        for (var j = 0; j < resultObj.getChar(i).getPhoneSize(); j++) {
          phoneHtml += " " + resultObj.getChar(i).getPhone(j).getChar();
          phoneHtml += " " + resultObj.getChar(i).getPhone(j).getScore();
        }

        if(resultObj.getChar(i).getOverall()) {
          htmlA += '<td title="' + phoneHtml + '">' + resultObj.getChar(i).getChar() + '</td>';
          htmlB += '<td>' + resultObj.getChar(i).getOverall() + '</td>';
          htmlC += '<td>' + resultObj.getChar(i).getPron() + '</td>';
          htmlD += '<td>' + resultObj.getChar(i).getPhn() + '</td>';
          htmlE += '<td>' + resultObj.getChar(i).getToneScore() + '</td>';
          htmlF += '<td>[' + resultObj.getChar(i).getConfidence() + ']</td>';
        } else {
          htmlA += '<td title="' + phoneHtml + '">' + resultObj.getChar(i).getChar() + '</td>';
          htmlB += '<td>0</td>';
          htmlC += '<td>0</td>';
          htmlD += '<td>0</td>';
          htmlE += '<td>0</td>';
          htmlF += '<td>[0,0,0,0,0]</td>';
        }
      }

      html += '<tr>' + htmlA + '</tr>';
      html += '<tr>' + htmlB + '</tr>';
      html += '<tr>' + htmlC + '</tr>';
      html += '<tr>' + htmlD + '</tr>';
      html += '<tr>' + htmlE + '</tr>';
      html += '<tr>' + htmlF + '</tr>';
      html += '</table>';
      $("#scoreResult .details").html(html);
    },

    onScoreError: (errorType) => {//评分失败的显示 "TIMEOUT", "NO_DATA", ErrorID
      var errorObj = ChiVoxSDK.StatusCode.get(errorType, "cn");
      alert(errorObj.feedback);
    }
});

$('#info').text(`ChiVoxSDK ver: ${ChiVoxSDK.VERSION}, mode: ${ChiVoxSDK.mode(sdk.options.mode)}`);
